<template>
  <div class="flex flex-col h-full w-full">
    <div class="form rounded-md p-4 bg-sky-600/20">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="form"
        label-width="auto"
        style="width: 30%"
      >
        <el-form-item
          label="开始及结束时间"
          prop="date"
        >
          <el-date-picker
            v-model="form.date"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            size="large"
            value-format="YYYY-MM-DD"
            :disabledDate="disabledDateFn"
            @calendar-change="cakebdarChange"
          />
        </el-form-item>
        <el-form-item
          label="查询指标"
          prop="type"
        >
          <el-select
            v-model="form.type"
            placeholder="选择指标名称"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in listOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit(ruleFormRef)"
            :disabled="loading"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="jingqingContainer bg-sky-600/20 mt-3 rounded-md w-full flex-1">
      <HistogramBar
        :data="Data"
        v-model="loading"
        v-if="Data"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import jingqingApi from "@/apis/jingqingApi";
import type { ZhibiaoParam } from "@/apis/jingqingApi";
import { cakebdarChange, disabledDateFn, shortcuts } from "./datePicker";
import { ElMessageBox } from "element-plus";
import type { FormRules, FormInstance } from "element-plus";
import { ElLoading } from "element-plus";
import HistogramBar from "@/components/front/jqcx/HistogramBar.vue";
import { JQZhibiaoDic, useGetOptions, type ListOptions } from "../helper";

const listOptions = ref<ListOptions[]>([]);
const Data = ref();
const ruleFormRef = ref<FormInstance>();

//传递到子组件，检测图表加载状态，进而对提交按钮进行控制
const loading = ref(false);
let loadingInstance = null;
//表单验证
interface RuleForm {
  date: string;
  type: string;
}

const form = reactive<RuleForm>({
  date: "",
  type: "",
});

const rules = reactive<FormRules<RuleForm>>({
  date: [{ required: true, message: "请选择要查询的时间段", trigger: "blur" }],
  type: [
    { required: true, message: "请选择要查询的指标类型", trigger: "blur" },
  ],
});

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true;
      loadingInstance = ElLoading.service({
        target: document.querySelector(".jingqingContainer") as HTMLElement,
      });

      let param: ZhibiaoParam = {
        startDate: form.date[0],
        endDate: form.date[1],
        zhiBiao: form.type,
      };

      await jingqingApi
        .getZhibiaoInfo(param)
        .then((res) => {
          if (res.code === 200) {
            Data.value = res.result;
          } else {
            ElMessageBox.alert("获取失败:"+ res.message);
          }
          loadingInstance!.close();
        })
        .catch((error) => {
          console.log("axios error " + error);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {
  //动态获取指标下拉菜单列表
  useGetOptions(JQZhibiaoDic).then((res) => {
    listOptions.value = res;
  });
});
</script>

<style scoped lang="scss">

</style>
